<script setup lang="ts">
interface BannerListType {
  picUrl: string;
}
let bannerList = ref<BannerListType[]>([
  { picUrl: "/images/product_ability/banner1.png" },
]);
onMounted(() => {
  getBanner();
});
const getBanner = async () => {
  const res = await useApi().app.getBanner({
    bannerCategory: "PRODUCT_ABILITY",
  });
  if (res.data.length) {
    bannerList.value = res.data;
  }
};
</script>

<template>
  <div class="pages">
    <div class="swiper-content">
      <Swiper
        :height="620"
        :pagination="{
          clickable: true,
          clickableClass: 'web-pagination',
        }"
        :modules="[SwiperPagination]"
      >
        <SwiperSlide
          class="banner-item"
          v-for="(item, index) in bannerList"
          :key="index"
          :style="{ backgroundImage: `url(${item.picUrl})` }"
        >
          <div class="content">
            <div class="txt-shadow">
              <h1 class="title" data-aos="fade-up" data-aos-duration="1000">
                科技让支付更懂你
              </h1>
              <p
                class="desc"
                data-aos="fade-up"
                data-aos-duration="1000"
                data-aos-delay="500"
              >
                科技连接你我 支付改变生活
              </p>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </div>
    <div class="ability">
      <div class="content">
        <h1 class="ability-title">能力介绍</h1>
        <p class="ability-desc">
          面向商户提供全方位的聚付服务，支持刷卡、扫码、刷脸及互联网等支付方式，
          满足商户线上线下一体化的支付需求。
        </p>
        <div class="ability-list">
          <div
            class="aos"
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-duration="600"
            data-aos-delay="100"
          >
            <div class="ability-item">
              <h6>开户便捷</h6>
              <p>
                通过实名认证即可成为商家中心用户，选择产品并提交相关材料，即可通过审核
              </p>
            </div>
          </div>
          <div
            class="aos"
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-duration="600"
            data-aos-delay="200"
          >
            <div class="ability-item">
              <h6>接入快速</h6>
              <p>轻松接入的支付工具，解决用户支付、商家收款等难题</p>
            </div>
          </div>
          <div
            class="aos"
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-duration="600"
            data-aos-delay="400"
          >
            <div class="ability-item">
              <h6>资金服务</h6>
              <p>盘活沉淀资金，操作更便捷，增值更灵活</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="advantage">
      <div class="advantage-content">
        <h1
          class="advantage-title"
          data-aos="fade-up"
          data-aos-once="true"
          data-aos-duration="600"
          data-aos-delay="100"
        >
          甬易优势
        </h1>
        <div class="advantage-list">
          <div
            class="advantage-item"
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-duration="600"
            data-aos-delay="150"
          >
            <img src="/images/product_ability/ys-icon1.png" alt="营销优势" />
            <h6>营销优势</h6>
            <p>数千万营销资金投入，集合站内站外资源为商家开辟用户市场。</p>
          </div>
          <div
            class="advantage-item"
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-duration="600"
            data-aos-delay="200"
          >
            <img src="/images/product_ability/ys-icon2.png" alt="服务优势" />
            <h6>服务优势</h6>
            <p>
              人性化、专业化的产品流程连接商城与用户。因为专业，所以信任；因为信任，所以简单。
            </p>
          </div>
          <div
            class="advantage-item"
            data-aos="fade-up"
            data-aos-once="true"
            data-aos-duration="600"
            data-aos-delay="250"
          >
            <img src="/images/product_ability/ys-icon3.png" alt="流量优势" />
            <h6>流量优势</h6>
            <p>甬易支付首页开放站内资源整合入口导向目标客户</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pages {
  .swiper-content {
    position: relative;
    background-color: #381817;
  }
  .swiper {
    max-width: 1920px;
  }
  .banner-item {
    min-height: 620px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    .content {
      padding-left: 50px;
      box-sizing: border-box;
      .txt-shadow {
        margin-top: 206px;
        display: inline-block;
        z-index: 2;
      }
      .title {
        font-weight: 700;
        font-size: 48px;
        color: #ffffff;
        text-shadow: 0px 10px 17px rgba(43, 5, 5, 0.1);
      }
      .desc {
        margin-top: 10px;
        font-weight: 400;
        font-size: 19px;
        color: #f2f0f0;
        text-shadow: 0px 10px 17px rgba(43, 5, 5, 0.1);
      }
    }
  }
  .ability {
    padding-top: 132px;
    .ability-title {
      font-weight: 700;
      font-size: 42px;
      color: #070a14;
      text-align: center;
    }
    .ability-desc {
      width: 858px;
      display: block;
      margin: 0 auto;
      margin-top: 32px;
      font-weight: 400;
      font-size: 18px;
      color: #8b8b8b;
      line-height: 34px;
      text-align: center;
    }
    .ability-list {
      margin-top: 96px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .aos {
        &:first-child .ability-item {
          background-image: url("/images/product_ability/ability-bg1.png");
        }
        &:nth-child(2) .ability-item {
          background-image: url("/images/product_ability/ability-bg2.png");
        }
        &:last-child .ability-item {
          background-image: url("/images/product_ability/ability-bg3.png");
        }
      }
      .ability-item {
        width: 351px;
        height: 477px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: 84px;
        padding-left: 62px;
        box-sizing: border-box;
        transition: transform 0.3s ease;
        h6 {
          font-weight: 700;
          font-size: 30px;
          color: #ffffff;
        }
        p {
          margin-top: 58px;
          width: 274px;
          font-weight: 400;
          font-size: 16px;
          color: #202949;
          line-height: 21px;
        }
        &:hover {
          transform: translateY(-10px);
        }
      }
    }
  }
  .advantage {
    height: 1040px;
    background-size: 962px cover;
    background-position: left;
    background-repeat: no-repeat;
    background-image: url("/images/product_ability/ys-bg.png");
    overflow: hidden;
    max-width: 1920px;
    margin: 202px auto;
    .advantage-content {
      width: 1442px;
      height: 822px;
      background: #f9f9f9;
      margin-top: 109px;
      overflow: hidden;
      margin-left: auto;
      .advantage-title {
        margin-right: 120px;
        font-weight: 700;
        font-size: 42px;
        color: #070a14;
        padding-bottom: 48px;
        margin-top: 206px;
        margin-left: 118px;
        display: block;
        width: 242px;
        border-bottom: 1px solid #e12010;
        position: relative;
        float: left;

        &::after {
          content: "";
          display: block;
          width: 86px;
          height: 6px;
          background: #e12010;
          position: absolute;
          left: 0;
          bottom: -6px;
        }
      }
      .advantage-list {
        margin-top: 160px;
        float: left;
        &::after {
          content: "";
          display: block;
          clear: both;
        }
        .advantage-item {
          width: 50%;
          margin-bottom: 110px;
          float: left;
          &:nth-child(3) {
            margin-bottom: 0;
          }
          img {
            width: 66px;
            height: 66px;
          }
          h6 {
            font-weight: 600;
            font-size: 20px;
            color: #070a14;
            position: relative;
            margin-top: 20px;
            &::after {
              position: absolute;
              bottom: -14px;
              left: 0;
              content: "";
              display: block;
              width: 30px;
              height: 2px;
              background: #e12010;
            }
          }
          p {
            width: 256px;
            display: inline-block;
            line-height: 21px;
            margin-top: 38px;
            font-weight: 400;
            font-size: 16px;
            color: #7a7b7f;
          }
        }
      }
      &::after {
        content: "";
        display: block;
        clear: both;
      }
    }
  }
}
</style>
